<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/iscroll-zoom.js"></script>
    <script src="js/hammer.js"></script>
    <script src="js/lrz.all.bundle.js"></script>
    <script src="js/jquery.photoClip.js"></script>
    <script>
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [260, 260],
            outputSize: [640, 640],
            file: "#file",
            source: "img/mm.jpg",
            view: "#view",
            ok: "#clipBtn",
            loadStart: function() {
                console.log("Loading");
            },
            loadComplete: function() {
                console.log("Complete");
            },
            clipFinish: function(dataURL) {
                console.log(dataURL);
            },
            loadError: function() {},
            lrzOption: {}
        });
    </script>
</head>
<body>
<div id="clipArea"></div>
<div id="view"></div>
<input type="file" id="file">
<button id="clipBtn">Crop</button>
</body>
</html>